import { create } from 'zustand'
import { immer } from 'zustand/middleware/immer'
import { TitleTextAlignEnum, TitleTextVAlignEnum } from '@/enums'
import { UseAttrsPanelStoreData, UseAttrsPanelStoreFnc } from '@/store/model'

const useTitleAttrStore = create<UseAttrsPanelStoreData & UseAttrsPanelStoreFnc, any>(
  immer((set) => ({
    text: 'title',
    show: true,
    subText: '',
    textAlign: TitleTextAlignEnum.Auto,
    textVerticalAlign: TitleTextVAlignEnum.Auto,
    triggerEvent: false,
    padding: 5,
    itemGap: 10,
    left: 'auto',
    right: 'auto',
    top: 'auto',
    bottom: 'auto',
    backgroundColor: 'transparent',
    textStyle: {
      color: '#333',
      fontStyle: 'normal',
      fontFamily: 'serif',
      fontWeight: 800,
      fontSize: 18,
      textBorderColor: '#000',
      textBorderWidth: 0,
      textBorderType: 'solid',
      ellipsis: '...',
      overflow: 'truncate',
      rich: {}
    },

    setText: (text: string) => set(() => ({ text })),
    setSubText: (subText: string) => set(() => ({ subText })),
    setShow: (show: boolean) => set(() => ({ show })),
    setTextAlign: (textAlign: TitleTextAlignEnum) => set(() => ({ textAlign })),

    setAttrs: <T>(key: string, value: T) => set(() => ({ [key]: value })),
    setTextStylesAttrs: (key: string, value: any) => set((state) => {
      state.textStyle[key] = value
      return state;
    })
  }))
)


export {
  useTitleAttrStore
}